<template>
	<view class="i-goods-like" :style="[viewStyle]">
		<view class="link-title e-flex-x-center" v-if="option.linkTitleShow">
			<view class="e-font-40 fw-600 e-rela" :style="[linkTitleStyle]">{{ option.linkTitleText }}</view>
		</view>
		<layout-goods-list isGoodsLike :storeId="storeId" :option="_option" :updateGoods="false" v-if="goodsList.length" :hasReachBottom="option.reachBottom"></layout-goods-list>
		
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import layoutGoodsList from './child/goods-list.vue'
	import { getPreferenceGoodsList } from '@/common/request/api'
	import type { GoodsItem } from '@/common/request/api'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'

	const props = withDefaults(defineProps<{
		storeId ?: string
		option : {
			//显示的商品条数
			goodsNumber : number
			// 布局
			layoutType : 1 | 2 | 3 | 4 | 5 | 6 | 7
			//是否显示商品标题
			titleShow : boolean
			//商品标题文本颜色
			titleColor : string
			//是否显示商品价格
			priceShow : boolean
			//商品价格文本颜色
			priceColor : string
			//是否显示划线原价
			scribeShow : boolean
			//划线原价文本颜色
			scribeColor : string
			//是否显示商品销量
			salesShow : boolean
			//商品销量文本颜色
			salesColor : string
			//是否显示购物车按钮
			buttonShow : boolean
			//购物车按钮样式类型，详见设计稿
			buttonType : 1 | 2 | 3 | 4
			//购物车按钮文本 仅buttonType为1生效
			buttonText : string
			//购物车按钮文本颜色 仅buttonType为1生效
			buttonTextColor : string
			//购物车按钮圆角 仅buttonType为1生效
			buttonRadius : number
			//购物车按钮背景颜色 仅buttonType为1生效
			buttonBackgroundColor : string
			//图标颜色 仅buttonType为2生效
			addIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为2生效
			addIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为2与addIconBackgroundType为true时生效
			addIconBackgroundColor : string
			//图标颜色 仅buttonType为3生效
			carIconColor : string,
			//图标颜色 仅buttonType为4生效
			circularCarIconColor : string
			//图标背景颜色是否为自定义 仅buttonType为4生效
			circularCarIconBackgroundType : boolean
			//自定义图标背景颜色 仅buttonType为4与circularCarIconBackgroundType为true时生效
			circularCarIconBackgroundColor : string
			//样式风格
			styleType : 0 | 1 | 2
			//底色背景
			backgroundColor : string
			//商品背景
			goodsBackgroundColor : string
			//jump跳转商品详情 add加入购物车
			buttonEvent : 'jump' | 'add'
			// 商品边距
			goodsMargin : number
			// 边距
			paddingTop : number
			paddingBottom : number
			paddingX : number
			// 商品圆角
			goodsRadiusTop : number
			goodsRadiusBottom : number
			//活动角标 0不显示 1系统图标 2自定义
			signType : 0|1|2
			//活动角标文本
			signText : string
			// 对应活动角标，详见设计稿
			signIconName : 0|1|2
			//自定义活动角标图片地址
			signIconUrl : string
			//是否显示标题
			linkTitleShow : boolean
			//标题文本
			linkTitleText : string
			//标题文本颜色
			linkTitleTextColor : string
			//标题线条颜色
			linkTitleLineColor : string

		}
	}>(), {
		option: () => ({
			goodsNumber: 7,
			layoutType: 4,
			titleShow: true,
			titleColor: 'rgba(48,49,51,1)',
			priceShow: true,
			priceColor: 'rgba(245,34,45,1)',
			scribeShow: true,
			scribeColor: 'rgba(192,196,204,1)',
			salesShow: true,
			salesColor: 'rgba(192,196,204,1)',
			buttonShow: true,
			buttonType: 1,
			buttonText: '',
			buttonTextColor: 'rgba(255, 255, 255, 1)',
			buttonRadius: 4,
			buttonBackgroundColor: 'rgba(245,34,45,1)',
			addIconColor: 'rgba(255, 255, 255, 1)',
			addIconBackgroundType: true,
			addIconBackgroundColor: 'rgba(245,34,45,1)',
			carIconColor: 'rgba(245,34,45,1)',
			circularCarIconColor: 'rgba(255, 255, 255, 1)',
			circularCarIconBackgroundType: true,
			circularCarIconBackgroundColor: 'rgba(245,34,45,1)',
			styleType: 0,
			backgroundColor: '',
			goodsBackgroundColor: 'rgba(255, 255, 255, 1)',
			buttonEvent: 'jump',
			goodsMargin: 7,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 10,
			goodsRadiusTop: 0,
			goodsRadiusBottom: 0,
			signType: 0,
			signText: '',
			signIconName: 0,
			signIconUrl: '',
			linkTitleShow: true,
			linkTitleText: '',
			linkTitleTextColor: 'rgba(48, 49, 51, 1)',
			linkTitleLineColor: 'rgba(245,34,45,1)',
		})
	})
	
	const ctx = useCurrentInstance()
	const { viewStyle } = useLayoutCompoments(ctx, props.option)

	const linkTitleStyle = computed(() => {
		return {
			color: props.option.linkTitleTextColor,
			'--color': props.option.linkTitleLineColor
		}
	})

	const goodsList = ref<GoodsItem[]>([])
	
	const _option = computed(() => {
		return {
			...props.option,
			goodsList:goodsList.value
		}
	})

	const layoutComponentsGetGoodsList = () => {
		getPreferenceGoodsList({
			pageSize: props.option.goodsNumber,
			pageNum: 1,
			storeId: props.storeId,
		}).then(res => {
			goodsList.value = res.rows
		})
	}

	layoutComponentsGetGoodsList()
</script>

<style scoped lang="scss">
	.link-title {
		padding: 30rpx 0;

		view {
			padding: 0 92rpx;

			&::after,
			&::before {
				content: '';
				position: absolute;
				width: 84rpx;
				height: 2rpx;
				background-color: var(--color);
				top: 50%;

			}

			&::after {
				left: 0;
			}

			&::before {
				right: 0;
			}
		}
	}
</style>